<template>
  <div>
    <div class="back" @click="back">←</div>
    <!-- 登录表单 -->
    <form
      action="#"
      class="login"
      :id="findPwData.findPwLogin"
      onsubmit="return false"
    >
      <div class="boy">
        <div class="hand-l" :class="boyHand.leftHand"></div>
        <div class="hand-r" :class="boyHand.rightHand"></div>
      </div>
      <h1>登录</h1>
      <input
        type="text"
        placeholder="请输入邮箱"
        name="U-email"
        v-model="userInfo.email"
        autocomplete
      />
      <input
        type="password"
        placeholder="请输入密码"
        name="pw"
        v-model="userInfo.password"
        @focus="hoodwink"
        @blur="open"
        autocomplete
      />
      <input type="submit" value="登录" @click="login" />
      <p v-if="userInfo.err" @click="findPw">
        用户名或密码错误&nbsp;,&nbsp;忘记密码了吗?
      </p>
      <div class="register">
        <a href="/register">还没有账号？点击注册</a>
      </div>
    </form>
    <!-- 找回密码框 -->
    <div class="findPw" :id="findPwData.findPw">
      <h1>找回密码</h1>
      <input
        type="text"
        :placeholder="this.emailCheck ? '请输入新的密码' : '请输入邮箱'"
        v-model="findPwInfo.email"
      />
      <input
        type="text"
        :placeholder="this.emailCheck ? '请再次输入密码' : '请输入验证码'"
        v-model="findPwInfo.emailCheck"
      />
      <input
        type="submit"
        v-show="findPwData.submitStatue == 0"
        style="display: inline-block"
        value="发送验证码"
        @click="sendEmail"
      />
      <input
        type="submit"
        v-show="findPwData.submitStatue == 1"
        style="display: inline-block"
        value="验证"
        @click="checkEmail"
      />
      <input
        type="submit"
        v-show="findPwData.submitStatue == 2"
        style="display: inline-block"
        value="修改密码"
        @click="PwCheck"
      />
      <div id="withdraw" @click="withdraw">←</div>
    </div>
  </div>
</template>

<script>
// 引入邮箱格式判断工具类
import { isAvailableEmail } from "@/tool/EmailCheck";
// 引入Cookie工具类
import { setCookie } from "@/tool/ToolCookie";
export default {
  data() {
    return {
      // 控制小男孩的手的数据
      boyHand: {
        leftHand: "",
        rightHand: "",
      },
      // 用户填写的数据
      userInfo: {
        email: "",
        password: "",
        // 是否显示密码错误提示
        err: false,
      },
      // 控制是否显示找回密码框的数据
      findPwData: {
        findPwLogin: "",
        findPw: "",
        submitStatue: 0,
      },
      // 找回密码用户填写的数据
      findPwInfo: {
        email: "",
        emailCheck: "",
      },
      // 保存前后端交互的数据
      webInfo: {
        // 后端验证码数据
        emailCheck: "",
        // 邮箱验证成功后保存用户的邮箱
        email: "",
      },
      // 判断用户是否通过邮箱验证
      emailCheck: false,
    };
  },
  methods: {
    // 返回上一步按钮的点击事件
    back() {
      this.$router.back();
    },
    // 小男孩遮眼事件
    hoodwink() {
      this.boyHand.leftHand = "hand-l-focus";
      this.boyHand.rightHand = "hand-r-focus";
    },
    // 小男孩手回位事件
    open() {
      this.boyHand.leftHand = "";
      this.boyHand.rightHand = "";
    },
    // 点击登录事件
    login() {
      // 判断邮箱格式
      if (!isAvailableEmail(this.userInfo.email)) {
        alert("邮箱格式错误！");
        return;
      }
      // 发送邮箱和密码给后端，判断是否对应
      this.$axios({
        method: "post",
        url: "http://localhost:8181/user/login",
        data: {
          mail: this.userInfo.email,
          password: this.userInfo.password,
        },
      }).then(
        (res) => {
          // 用户名密码错误(收到的数据没有用户id)，显示提示信息
          if (res.data.id == null) {
            this.userInfo.err = true;
            alert("用户名密码错误!");
            return;
          }
          // 用户不存在(收到的数据是null),显示提示信息
          if (res.data == "") {
            alert("该用户不存在,可以尝试先去注册哦~")
            return
          }
          alert("登录成功!");
          // 隐藏提示信息
          this.userInfo.err = false;
          // 登录成功保存cookie
          setCookie(
            {
              userId: res.data.id,
            },
            7,"/"
          );
          // 跳转主页面
          this.$router.push({
            path: "/main",
          });
        },
        (err) => {
          console.log("登录失败！", err);
          alert("登录失败！");
        }
      );
    },
    // 找回密码显示事件
    findPw() {
      this.findPwData.findPwLogin = "findPwLogin";
      this.findPwData.findPw = "findPwShow";
    },
    // 找回面膜框不显示事件(并且错误提示也不显示)
    withdraw() {
      this.findPwData.findPwLogin = "";
      this.findPwData.findPw = "";
      this.userInfo.err = false;
    },
    // 发送验证码按钮的事件:发送邮箱验证码
    sendEmail() {
      // 判断输入的邮箱格式是否正确
      if (!isAvailableEmail(this.findPwInfo.email)) {
        alert("邮箱格式不正确！");
        return;
      }
      // 请求后端发送验证码
      this.$axios({
        method: "post",
        url: "http://localhost:8181/user/emailCheck",
        data: {
          mail: this.findPwInfo.email,
          username: "",
        },
      }).then(
        (res) => {
          alert("验证码已发送,请注意查收!");
          // 存储后端返回的验证码
          this.webInfo.emailCheck = res.data;
          // 更改显示的提交按钮
          this.findPwData.submitStatue = 1;
        },
        (err) => {
          console.log(err);
        }
      );
    },
    // 验证按钮的事件:验证验证码
    checkEmail() {
      // 若验证码不正确
      if (this.findPwInfo.emailCheck != this.webInfo.emailCheck) {
        alert("验证码错误!请重试");
        // 显示的提交按钮复位
        this.findPwData.submitStatue = 0;
      }
      alert("验证成功!");
      // 更改状态,input框的内容改变
      this.emailCheck = true;
      // 验证码正确,显示的提交按钮更改
      this.findPwData.submitStatue = 2;
      // 保存邮箱,清空input框内容
      this.webInfo.email = this.findPwInfo.email;
      this.findPwInfo.email = "";
      this.findPwInfo.emailCheck = "";
    },
    // 提交按钮的事件:提交更改密码
    PwCheck() {
      // 判断两次输入的密码是否正确
      if (this.findPwInfo.email != this.findPwInfo.emailCheck) {
        alert("两次输入的密码不同!请重新输入");
        return;
      }
      // 发送请求更改密码
      this.$axios({
        method: "post",
        url: "http://localhost:8181/user/updatePasswordByMail",
        data: {
          password: this.findPwInfo.email,
          mail: this.webInfo.email,
        },
      }).then(
        (res) => {
          console.log(res);
          if (res.data) {
            alert("更改成功!");
            // 刷新页面
            this.$router.go(0);
          }
          if (!res.data) {
            alert("更改失败!可能您还没有注册过账号");
          }
        },
        (err) => {
          console.log(err);
        }
      );
    },
  },
};
</script>

<style scoped>
/* 闭眼小男孩部分 */
.main {
  height: 600px;
}
.boy {
  position: absolute;
  height: 85px;
  width: 150px;
  top: -83px;
  left: 120px;
  background: no-repeat url("@/assets/smallBoy.png");
  background-size: contain;
}

.hand-r,
.hand-l {
  background-color: #d19c72;
  height: 20px;
  width: 20px;
  position: absolute;
  top: 70px;
  border-radius: 20px;
  transition: all 0.5s;
  transform: scaleY(0.8);
}

.hand-l {
  left: 20px;
  box-shadow: inset -2px -2px rgba(0, 0, 0, 0.1);
}

.hand-r {
  right: 28px;
  box-shadow: inset 2px -2px rgba(0, 0, 0, 0.1);
}

.hand-l-focus,
.hand-r-focus {
  background-color: #d19c72;
  height: 25px;
  width: 25px;
  position: absolute;
  border-radius: 20px;
  transition: all 0.5s;
}

.hand-l-focus {
  top: 37px;
  left: 40px;
  transform: scaleX(1.2) skew(-9deg);
  box-shadow: inset -2px -2px rgba(0, 0, 0, 0.1);
}

.hand-r-focus {
  top: 37px;
  right: 48px;
  transform: scaleX(1.2) skew(10deg);
  box-shadow: inset 2px -2px rgba(0, 0, 0, 0.1);
}

/* 登录部分 */
.login {
  position: absolute;
  background-color: #242834;
  top: 200px;
  left: 300px;
  width: 400px;
  height: 300px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 10px;
  transition: all 0.5s;
}

/* 登录标题 */
h1 {
  color: #fff;
  font-weight: 600;
}

/* 文本框 */
input[type="text"],
input[type="password"] {
  background: none;
  display: block;
  margin: 20px auto 0;
  border: 2px solid #6d5ed4;
  text-align: center;
  width: 200px;
  padding: 10px 0;
  border-radius: 20px;
  outline: none;
  color: #fff;
  transition: all 0.5s;
}

input[type="submit"] {
  background: none;
  display: block;
  margin: 20px auto 0;
  border: 2px solid #2ecc71;
  text-align: center;
  width: 100px;
  padding: 10px 0;
  border-radius: 20px;
  color: #fff;
  cursor: pointer;
}

input[type="text"]:focus,
input[type="text"]:hover,
input[type="password"]:focus,
input[type="password"]:hover {
  width: 300px;
  border-color: #2ecc71;
}

input[type="submit"]:hover {
  background-color: #2ecc71;
}

/* 登录错误提示字段 */
p {
  color: #d26f5c;
  font-weight: 100;
  font-size: xx-small;
  margin: 10px auto;
  cursor: pointer;
  border-bottom: 1px solid #d26f5c;
}

/* 注册跳转 */
.register {
  position: absolute;
  bottom: -10%;
  right: -5%;
  background-color: #6d5ed4;
  font-size: xx-small;
  padding-top: 10px;
  height: 30px;
  width: 50%;
  border-radius: 5px 0 0 5px;
  z-index: 1;
}
/* 书签末尾 */
.register::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 0;
  border-color: #6d5ed4 transparent #6d5ed4 #6d5ed4;
  border-width: 20px 20px 20px 0;
  border-style: solid;
}

.register a {
  color: #fff;
  text-decoration: none;
  display: block;
  height: 100%;
}

/*  返回按钮部分  */
.back {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: xxx-large;
  font-weight: 700;
  background-color: #242834;
  color: #fff;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
}

#withdraw {
  position: absolute;
  right: 0;
  bottom: 0;
  cursor: pointer;
  color: #fff;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-weight: 700;
  text-align: center;
  line-height: 50px;
  font-size: xx-large;
  background-color: #20202a;
}
/* 找回密码部分 */
.findPw {
  position: absolute;
  top: 200px;
  padding-top: 20px;
  right: 300px;
  z-index: -1;
  width: 400px;
  height: 300px;
  background-color: #242834;
  border-radius: 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: all 0.5s;
}

#findPwLogin {
  left: 100px;
  border-radius: 20px 0 0 20px;
}

#findPwShow {
  display: inline-block;
  border-radius: 0 20px 20px 0;
  z-index: 0;
  right: 100px;
  border-left: solid 0.2px #55556d;
}
</style>